<template>
	<div class="">

		<div class="container">
			<div class="title">二维码打印</div>
			<div class="printbox">
				<div class="search_box">
					<label class="seartitle">打印数量：</label>
					<input type="text" autocomplete="off" v-model="num" class="form-control search_inp"
						placeholder="请输入打印数量" @change="changenum">

					<div class="sea_btn sear_btns" @click="print">
						<img src="@assets/images/search.png" alt="">
						预览
					</div>

					<div class="down_btn sear_btns" @click="doprint">
						<span class="iconfont icon-dayin" style="margin-right: 8px;"></span>
						打印
					</div>
					<div class="zhu">使用说明：输入打印数量，点击打印可打印多个资产二维码，扫描资产二维码可以进行注册、编辑、报废等操作</div>
				</div>

				<div class="search_box">
					<label class="seartitle">打印标题：</label>
					<input type="text" autocomplete="off" v-model="title" class="form-control search_inp"
						placeholder="请输入打印标题" @change="settitle()">
				</div>
				<div class="search_box">
					<label class="seartitle">打印文字：</label>

					<div class="elp">
						<quill-editor v-model="textarea" ref="myQuillEditor" @change="onchange($event)"
							@ready="ready($event)" :options="editorOption"></quill-editor>
						<span class="nums">{{nums}}/100</span>
					</div>
					<!-- <el-input class="textar" :autosize="true" type="textarea" placeholder="请输入内容" v-model="textarea"
						@change="changetext">
					</el-input> -->
				</div>

				<div class="tablealert" id="printDiv">
					<div class="empty" v-if="codes.length == 0">输入数量后点击预览按钮预览二维码</div>
					<vueEasyPrint v-else ref="easyPrint" tableShow>
						<!-- <div class="dig"> -->
						<div v-for="item,index in codes" class="pintpage">

							<!-- <div class="pintpage" style="padding: 0;"> -->
							<div class="codeleft">
								<div class="num" style="font-size: 24px;">{{title}}</div>
								<QrCode :id="'QrCode'+index" width="300" height="300"
									style="width: 300px;height: 300px;" :text="item.url" />
								<div class="num">资产编码：{{item.num}}</div>
							</div>
							<!-- <pre class="coderight" v-html="textarea"></pre> -->
							<div class="coderight" v-html="textarea"></div>
							<!-- </div> -->


						</div>
						<!-- </div> -->

					</vueEasyPrint>
				</div>
			</div>

		</div>

		<div class="loading-content" v-if="showloading">
			<div class="loading-spinner">
				<svg viewBox="25 25 50 50" class="circular">
					<circle cx="50" cy="50" r="20" fill="none" class="path"></circle>
				</svg>
			</div>
			<div class="loading-text">加载中...</div>
		</div>
	</div>
</template>

<script type="text/babel">
	import $ from 'jquery'
	import QrCode from '../../components/qrcode.vue'
	import vueEasyPrint from "vue-easy-print"
	import {quillEditor, Quill} from 'vue-quill-editor'
	import '@/assets/css/size-set.css'
	// import { lineHeightStyle } from "@/utils/lineHeight.js";
	let fontSizeStyle = Quill.import('attributors/style/size')
	fontSizeStyle.whitelist = [
	  '10px',
	  '12px',
	  '14px',
	  '16px',
	  '18px',
	  '20px',
	  '22px',
	  '24px',
	  '26px',
	  '28px',
	  '30px',
	  '32px',
	  '36px',
	  '38px',
	  '40px',
	  '45px',
	  '50px',
	  // false
	]
	
	Quill.register(fontSizeStyle, true)
	const toolbarOptions = [
	
	  ['bold', 'italic', 'underline', 'strike'], 
	  ['blockquote', 'code-block'], 
	  [{ size: fontSizeStyle.whitelist }], //重点是添加这个，其他的本来就有的
	  // [{ 'size': ['12', false, '16', '18', '20', '24', '28', '32', '36'] }], // 字体大小
	  [{ header: 1 }, { header: 2 }], 
	  [{ list: 'ordered' }, { list: 'bullet' }],
	  [{ script: 'sub' }, { script: 'super' }], 
	  [{ indent: '-1' }, { indent: '+1' }], 
	  [{ direction: 'rtl' }], 
	  [{ header: [1, 2, 3, 4, 5, 6, false] }],
	  [{ color: [] }, { background: [] }], 
	  [{ font: [] }], 
	   // [{ 'font': [false, 'heiti', 'songti', 'kaiti', 'lishu', 'arial', 'monospace'] }], // 字体 false默认微软雅黑，其他可删减
	  [{ align: [] }], 
	 // [{ lineheight: ["1", "1.5", "1.75", "2", "3", "4", "5"] }], // 对齐方式
	  ['clean'], 
	]
	export default {
		name: "",
		data() {
			return {
				num:'',
				nums:0,
				codes:[],
				textarea:"",
				title:"",
				editorOption: {
					placeholder:'请输入内容',
				    modules: {
						toolbar:  toolbarOptions,
				    }
				},
				showloading:false
			}
		},
		components: { QrCode,vueEasyPrint },
		mounted() {
			this.gettext()
			this.gettitle()
		},
		beforeRouteEnter(to, from, next) { //路由导航钩子，通过页面路由标记是否需要清空页面数据重新加载
		    to.meta['fromPath'] = from.path;
			to.meta['needFresh'] = false;
		    
		    next();
		  },
		activated(){
			
		},
		methods: {
			ready() {
			  Quill.register({ "formats/lineHeight": lineHeightStyle }, true);
			},
			onchange(e){
				e.quill.deleteText(5000,4)
				// if(this.nums == ''){
				// 	this.nums = 0
				// }else{
					this.nums = e.quill.getLength()-1
				// }
				this.settext()
			},
			changenum(){
				this.codes = []
				this.$forceUpdate()
			},
			doprint(){
				if(!this.num){
					this.$Toast('请先输入数量');
					return
				}
				// this.settext()
				if(this.codes.length == 0){
					var that = this
					that.$http.get(this.$url + '/zc/print?count='+this.num)
						.then(function(response) {
							// console.log(response.data.data)
							that.codes = []
							var url = that.$url.replace(/\/gd$/, '')
							for (let i = 0; i < response.data.data.length; i++) {
								// that.codes[i].url = url+'/gdmobile/wecom.html?scan=3&rou=qrcode&SNUM='+ response.data.data[i]+'#/ding'
								// that.codes[i].num = response.data.data[i]
								that.codes[i]={
									url:url+'/gdmobile/wecom.html?scan=3&rou=qrcode&SNUM='+ response.data.data[i]+'#/ding',
									num:response.data.data[i]
								}
								console.log(that.codes[i])
							}
							setTimeout(function(){
								that.$refs.easyPrint.print()
							},500)
						})
						.catch(function(error) {
							console.log(error);
							
							that.$Toast('网络拥堵，刷新一下');
						});
				}else{
					this.$refs.easyPrint.print()
				}
				
			},
			settitle(){
				var that = this
				
				var param = {
					remark:this.title
				}
				console.log(this.textarea)
				that.$http.post(this.$url + '/zc/printWord/title/set',this.$qs.stringify(param))
					.then(function(response) {
						
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			settext(){
				var that = this
				if(this.nums > 100){
					this.$Toast('请输入100以内的字数');
					return
				}
				var param = {
					remark:this.textarea
				}
				console.log(this.textarea)
				that.$http.post(this.$url + '/zc/printWord/set',this.$qs.stringify(param))
					.then(function(response) {
						
						
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			print(){
				if(!this.num){
					this.$Toast('请先输入数量');
					return
				}
				// this.settext()
				var that = this
				that.$http.get(this.$url + '/zc/print?count='+this.num)
					.then(function(response) {
						// console.log(response.data.data)
						that.codes = []
						var url = that.$url.replace(/\/gd$/, '')
						for (let i = 0; i < response.data.data.length; i++) {
							// that.codes[i] = url+'/gdmobile/wecom.html?scan=3&rou=qrcode&SNUM='+ response.data.data[i]+'#/ding'
							that.codes[i]={
								url:url+'/gdmobile/wecom.html?scan=3&rou=qrcode&SNUM='+ response.data.data[i]+'#/ding',
								num:response.data.data[i]
							}
							console.log(that.codes)
						}
						
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			gettitle(){
				var that = this
				that.$http.get(this.$url + '/zc/printWord/title/select')
					.then(function(response) {
						console.log(response.data.data)
						that.title = response.data.msg
						
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			},
			gettext(){
				var that = this
				that.$http.get(this.$url + '/zc/printWord/select')
					.then(function(response) {
						console.log(response.data.data)
						that.textarea = response.data.msg
						
					})
					.catch(function(error) {
						console.log(error);
						
						that.$Toast('网络拥堵，刷新一下');
					});
			}
		},
	}
</script>
<style lang='less' scoped>
	.dig {
		display: flex;
		flex-direction: column;
		/* justify-content: flex-start; */
		align-items: flex-start;
		page-break-after: always;
	}

	.elp {
		width: 600px;
		position: relative;

	}

	.nums {
		position: absolute;
		right: 10px;
		bottom: 10px;
	}

	.textar {
		width: 400px;
	}

	.num {
		font-size: 20px;
		color: #000000;
		margin-top: 10px;
	}

	.zhu {
		position: absolute;
		color: #be845f;
		margin-left: 80px;
		margin-top: -10px;
		top: 50px;
	}

	.seartitle {
		font-size: 14px;
		line-height: 34px;
		margin-bottom: 0;
		color: #000000;
	}

	.empty {
		width: 100%;
		text-align: center;
		padding-top: 20px;
	}

	.printbox {
		width: 100%;
		height: calc(100vh - 130px);
		overflow-y: auto;
		/* margin-top: 50px; */
	}

	.tablealert {
		width: 100%;
		/* height: calc(100vh - 230px); */
		margin-top: 50px;
		overflow-y: initial;
		padding: 0 80px;
	}

	.pintpage:nth-last-of-type(1) {
		border-bottom: none;
	}

	.codeleft {
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		margin-right: 30px;
	}

	.coderight {
		font-size: 20px;
		color: #000000;
		background: transparent;
		border: none;
		/* margin-bottom: 42px; */
		height: 300px;
	}

	.pintpage {
		page-break-after: always;
		display: flex;
		/* justify-content: center; */
		align-items: center;
		/* flex-direction: column; */
		/* width: 100%; */
		height: 100%;
		padding: 50px 0;
		/* border-bottom: 1px solid #ccc; */
	}

	.search_box {
		margin-bottom: 50px;
		position: relative;
		align-items: flex-start;
	}

	.search_inp {
		width: 260px;
		/* width: 160px; */
		margin-left: 10px;
		/* margin-bottom: 20px; */
	}

	.title {
		font-size: 24px;
		color: #000000;
	}
</style>
